<template>
  <view class="main">
    <header-vue :back="true" title="账号与安全"></header-vue>
    <view class="white-box margin32 font28">
      <view class="flex between item" @click="onPhoneClick">
        <view>手机号</view>
        <view class="flex align-center"
          ><text>{{formData.phone}}</text><i class="iconfont icon-jiantou"></i
        ></view>
      </view>
      <view class="flex between item" @click="onLogout">
        <view>注销账号</view>
        <i class="iconfont icon-jiantou"></i>
      </view>
      <view class="flex between item" @click="onPassClick">
        <view>登录密码</view>
        <i class="iconfont icon-jiantou"></i>
      </view>
      <!-- setPassPopup -->
      <set-pass-popup
        :show="showPasswordTip"
        @close="showPasswordTip = false"
      
      ></set-pass-popup>

        <!-- 修改手机号弹窗 -->
      <phone-edit-popup
        :show="showPhoneEdit"
        :currentPhone="formData.phone"
        @close="showPhoneEdit = false"
        @success="onPhoneUpdateSuccess"
      />
    </view>
  </view>
</template>

<script>
import headerVue from "../../components/header.vue";

import setPassPopup from "./components/set-pass-popup.vue";
import PhoneEditPopup from "./components/phone-edit-popup.vue";
export default {
  components: {
    headerVue,
    setPassPopup,
    PhoneEditPopup
  },
  data() {
    return {
      showPasswordTip: false,
      showPhoneEdit: false,
      formData: {
        phone: "13888888888",
      }
    };
  },
  methods: {
    onPhoneUpdateSuccess() {
      this.showPhoneEdit = false;
      this.formData.phone = "13888888888";
    },
    goPage(url) {
      uni.navigateTo({
        url,
      });
    },
    onPassClick() {
      this.showPasswordTip = true;
    },
    onPhoneClick() {
      this.showPhoneEdit = true;
      
    },
    onLogout() {
      uni.showModal({
        title: "提交申请后,将会删除所有数据",
        content:"1.账号下资产及预期收入和权益均已结清或自愿放弃，支付账户已注销。2.账号授权、绑定已解除。",
        success: (res) => {
          if (res.confirm) {
            uni.reLaunch({
              url: "/pages/main",
            });
          } else if (res.cancel) {
            console.log("用户点击取消");
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  background: #f6f6f6;
  height: 100vh;
}

.margin32 {
  margin: 28rpx 32rpx;
}

.white-box {
  background: #ffffff;
  box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
  border-radius: 20rpx;
  padding: 0 28rpx;
  box-sizing: border-box;

  .item {
    padding: 40rpx 0;
    box-sizing: border-box;
    border-top: 1rpx solid #dddddd;

    &:nth-child(1) {
      border: 0;
    }
  }
}

.btn {
  height: 80rpx;
  background: #0785cf;
  box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(7, 133, 207, 0.1);
  border-radius: 60rpx;
  font-weight: 500;
  font-size: 36rpx;
  color: #ffffff;
  margin-top: 100rpx;
}
</style>
